<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <link rel="stylesheet" href="style.css">
</head>

<body style="color:#fff">
    <!-- 今天的案例，实现原理跟原教程不太一样，思路差不多，原教程的思路扩展性比较差，所有根据自己所需的知识，自己弄了一个，大家可以看看，有什么更好的建议可以在评论区留言！！ -->
    <!-- 开始写代码 -->
    <!-- 提前准备好1-7.jpg（400*300px） -->
    <!-- 图片一定要处理好大小，如果大小不一致，使用css去规范大小效果会不好 -->
    <div class="container">
        <div class="pic">
            <img src="1.jpg">
            <div class="title">编</div>
        </div class="pic">
        <div class="pic">
            <img src="2.jpg">
            <div class="title">译</div>
        </div class="pic">
        <div class="pic">
            <img src="3.jpg">
            <div class="title">中</div>
        </div class="pic">
        <div class="pic">
            <img src="4.jpg">
            <div class="title">梦</div>
        </div class="pic">
        <div class="pic">
            <img src="5.jpg">
            <div class="title">见</div>
        </div class="pic">
        <div class="pic">
            <img src="6.jpg">
            <div class="title">未</div>
        </div class="pic">
        <div class="pic">
            <img src="7.jpg">
            <div class="title">来</div>
        </div class="pic">
    </div>

</body>

</html>